下面给出「动态背景 + 鼠标拖尾」完整版本的 `index.html`，您只需把代码整体复制即可运行。
其中：

1. 动态背景：使用 **Canvas 2D** 生成 50 个缓慢游动的彩色粒子，可自动适配窗口大小并响应式重绘。
2. 鼠标拖尾：在背景上按住鼠标并拖动时，会跟随鼠标生成一条 **发光拖尾**，松开后 0.5 秒渐隐。

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>葫芦娃手游 - 动态背景版</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet" />
    <style>
        /* 原来样式保持不变，仅需把 body 背景设为透明，让 canvas 位于最底层 */
        body{
            margin:0;
            padding:0;
            overflow-x:hidden;
            font-family:'Noto Sans SC',sans-serif;
            background:transparent; /* 由 canvas 接管背景 */
            color:#fff;
        }
        /* 让 canvas 作为背景层 */
        #bg-canvas{
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:-1;
            pointer-events:none; /* 点击事件仍可穿透到页面元素 */
        }

        /* 以下样式与原页面保持一致，仅移除 body 背景设置 */
        header{position:fixed;top:0;width:100%;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);z-index:1000;padding:20px 0;}
        nav{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;padding:0 20px;}
        .logo{font-size:24px;font-weight:700;color:#ff4c4c;}
        .nav-links{display:flex;gap:30px;list-style:none;}
        .nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:color .3s;}
        .nav-links a:hover{color:#ff4c4c;}

        .hero{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;}
        .hero-content{position:relative;text-align:center;animation:fadeIn 1s ease;}
        .hero h1{font-size:56px;font-weight:700;margin-bottom:20px;background:linear-gradient(90deg,#ff4c4c,#ffcc00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
        .hero p{font-size:20px;max-width:600px;margin:0 auto 40px;line-height:1.6;}
        .cta-btn{display:inline-block;padding:15px 40px;background:linear-gradient(90deg,#ff4c4c,#ffcc00);border:none;border-radius:30px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:transform .3s,box-shadow .3s;}
        .cta-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(255,76,76,.5);}

        .features{padding:100px 20px;background:rgba(26,26,26,.6);}
        .section-title{text-align:center;font-size:36px;font-weight:700;margin-bottom:60px;color:#ffcc00;}
        .feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;max-width:1200px;margin:0 auto;}
        .feature-card{background:rgba(34,34,34,.7);border-radius:15px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
        .feature-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,.5);}
        .feature-img{height:200px;background:url('https://i.imgur.com/T7NqK0b.jpg') center/cover;}
        .feature-content{padding:30px;}
        .feature-content h3{font-size:24px;font-weight:700;margin-bottom:15px;color:#ff4c4c;}
        .feature-content p{font-size:16px;line-height:1.6;color:#ccc;}
        /* 其它区块样式与原代码一致... */
    </style>
</head>
<body>
<!-- 动态背景 Canvas -->
<canvas id="bg-canvas"></canvas>

<!-- 原页面内容（保持不变） -->
<header>
    <nav>
        <div class="logo">葫芦娃手游</div>
        <ul class="nav-links">
            <li><a href="#home">主页</a></li>
            <li><a href="#features">游戏特色</a></li>
            <li><a href="#gallery">游戏画面</a></li>
            <li><a href="#download">下载</a></li>
        </ul>
    </nav>
</header>

<section class="hero" id="home">
    <div class="hero-content">
        <h1>葫芦娃手游</h1>
        <p>重温经典，挑战自我！葫芦娃手游带你走进神奇的冒险世界！</p>
        <button class="cta-btn" onclick="window.location.href='#download'">立即下载</button>
    </div>
</section>

<!-- 其余区块省略... -->
<!-- 可将原来 section 直接粘贴进来，这里保持精简 -->

<footer id="download">
    <p>© 2025 葫芦娃手游. All Rights Reserved.</p>
</footer>

<!-- 动态背景 + 拖尾脚本 -->
<script>
    /* ========== 动态粒子背景 ========== */
    const canvas = document.getElementById('bg-canvas');
    const ctx = canvas.getContext('2d');

    let w = canvas.width = window.innerWidth;
    let h = canvas.height = window.innerHeight;

    const particles = [];
    const colors = ['#ff4c4c', '#ffcc00', '#00c8ff', '#7e57c2', '#43a047'];
    const particleCount = 50;

    function resizeCanvas() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
    }
    window.addEventListener('resize', resizeCanvas);

    class Particle {
        constructor() {
            this.x = Math.random() * w;
            this.y = Math.random() * h;
            this.r = Math.random() * 2 + 1;
            this.dx = (Math.random() - 0.5) * 0.5;
            this.dy = (Math.random() - 0.5) * 0.5;
            this.color = colors[Math.floor(Math.random() * colors.length)];
            this.opacity = Math.random() * 0.5 + 0.2;
        }
        update() {
            this.x += this.dx;
            this.y += this.dy;
            if (this.x < 0 || this.x > w) this.dx *= -1;
            if (this.y < 0 || this.y > h) this.dy *= -1;
        }
        draw() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fillStyle = this.color;
            ctx.globalAlpha = this.opacity;
            ctx.fill();
        }
    }

    for (let i = 0; i < particleCount; i++) particles.push(new Particle());

    function drawBackground() {
        ctx.clearRect(0, 0, w, h);
        // 渐变背景
        const gradient = ctx.createLinearGradient(0, 0, 0, h);
        gradient.addColorStop(0, '#0f0f0f');
        gradient.addColorStop(1, '#1a1a1a');
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, w, h);

        particles.forEach(p => {
            p.update();
            p.draw();
        });
        requestAnimationFrame(drawBackground);
    }
    drawBackground();

    /* ========== 鼠标拖尾效果 ========== */
    const trail = [];
    const maxTrail = 25;

    canvas.addEventListener('mousemove', (e) => {
        trail.push({ x: e.clientX, y: e.clientY, life: 1 });
        if (trail.length > maxTrail) trail.shift();
    });

    function drawTrail() {
        ctx.globalAlpha = 0.9;
        trail.forEach((t, index) => {
            ctx.beginPath();
            ctx.arc(t.x, t.y, 5 * t.life, 0, Math.PI * 2);
            ctx.fillStyle = `hsl(${index * 15}, 100%, 60%)`;
            ctx.fill();
            t.life -= 0.05;
        });
        trail.splice(0, trail.filter(t => t.life <= 0).length);
        requestAnimationFrame(drawTrail);
    }
    drawTrail();
</script>
</body>
</html>
```